<template>
  <card title="收支账号">
    <a-descriptions
      :label-style="{
        textAlign: 'right',
        width: '156px',
        paddingRight: '10px',
        color: 'rgb(var(--gray-8))',
      }"
      :value-style="{ width: '400px' }"
      v-if="list.length > 0"
    >
      <a-descriptions-item :label="item.label" :span="item.span" v-for="(item, index) in list" :key="index">
        <template v-if="item.slotName">
          <slot :name="item.slotName"></slot>
        </template>
        <template v-else-if="item.render">
          {{ item.render() }}
        </template>
        <template v-else>
          {{ item.value }}
        </template>
      </a-descriptions-item>
    </a-descriptions>
    <a-empty v-else />
  </card>
</template>

<script setup>
  import { computed } from 'vue'

  const props = defineProps({
    data: Array,
  })

  const list = computed(() => {
    const backInfoList = props.data || []
    const arr = []
    backInfoList.forEach((item) => {
      const { bank, bankCardNumber, inExpWayName, inExpWay } = item
      arr.push({ label: '收支方式', value: inExpWayName || '-' })
      arr.push({ label: '账号', value: bankCardNumber || '-', span: inExpWay === 1 ? 1 : 2 })
      if (inExpWay === 1) {
        arr.push({ label: '开户行', value: bank || '-' })
      }
      // arr.push({ label: '开户地', value: provinceName + cityName || '-' })
    })
    return arr
  })
</script>

<style lang="less" scoped>
  .descriptions-title {
    font-size: 16px;
    font-weight: 600;
    color: #1d2129;
  }
</style>
